<template>
  <el-scrollbar>
    <el-collapse v-model="activeNames">
      <el-collapse-item name="1" style="margin-left: 2px">
        <template #title>
          <el-icon size="20px" color=#b3c0d1>
            <warning-filled/>
          </el-icon>
          &nbsp;正在进行
        </template>
        <el-checkbox-group>
          <el-row :key="index" v-for="(item, index) in todoList" style="margin-left: 5px">
            <el-checkbox :checked="isChecked1" style="size: 20px" @change="doneClick(item.id)">
              {{ item.title }}
            </el-checkbox>
          </el-row>
        </el-checkbox-group>
        <el-row style="margin-left: 5px">
          <el-col :span="12">
            <el-input v-model.trim="input" @change="handeInputEnter" placeholder="新的Todo"></el-input>
          </el-col>
          <el-col :span="2" style="cursor: pointer" @click="addTodo">
            <el-icon size="30px" color=#b3c0f1>
              <circle-plus-filled/>
            </el-icon>
          </el-col>
        </el-row>
      </el-collapse-item>
      <el-collapse-item name="2" style="margin-left: 2px">
        <template #title>
          <el-icon size="20px" color=#b3c0d1>
            <success-filled/>
          </el-icon>
          &nbsp;已完成（近一个月）
        </template>
        <el-row :key="index" v-for="(item, index) in doneList" style="margin-left: 5px">
          <el-checkbox style="size: 20px" :disabled="isDisabled" :checked="isChecked">
            {{ item.title }}
          </el-checkbox>
        </el-row>
      </el-collapse-item>
    </el-collapse>
  </el-scrollbar>
</template>
<script>
import {ref} from "vue";

export default {
  inject: ['reload'],
  data() {
    return {
      activeNames: ['1'],
      isChecked: true,
      isDisabled: true,
      isChecked1: ref(false),
      todoList: ref([]),
      doneList: ref([]),
      input: '',
      moveAction: true
    };
  },
  methods: {

    addTodo() {
      let regx = "^[ ]+$";  // 全为空格的情况
      let reg = new RegExp(regx);
      if (this.input === '' || reg.test(this.input)) {
        this.$message({
          type: "info",
          message: "输入不能为空！"
        });
        return;
      }
      this.$axios.post("/todo/add", {
        title: this.input
      }).then((res) => {
        if (res.data === true) {
          this.input = '';  // 输入完将文本值为空
          this.getDoingList();
          this.getDoneList();
        }
      })
    },

    handeInputEnter() {
      this.$axios.post("/todo/add", {
        title: this.input
      }).then((res) => {
        if (res.data === true) {
          this.input = '';  // 输入完将文本值为空
          this.getDoingList();
        }
      })
    },

    doneClick(id) {
      this.$axios.get("/todo/done", {
        params: {
          todoId: id
        }
      }).then((res) => {
        if (res.data === true) {
          setTimeout(() => {}, 1000);
          this.getDoingList();
          this.getDoneList();
          this.getDoneList();
        } else {
          this.$message({
            type: "info",
            message: "网络错误！"
          });
        }
        this.isChecked1 = false;
      })
    },

    getDoingList() {
      this.$axios.get("/todo/getDoing").then((res) => {
        this.todoList = res.data;
      })
    },

    getDoneList() {
      this.$axios.get("/todo/getDone").then((res) => {
        this.doneList = res.data;
      })
    }
  },
  created() {
    this.getDoingList();
    this.getDoneList();
  }
}
</script>